<template>
  <div class="put-forward">
    <div class="div-input">
      <x-input title="支付宝账号" type="number" v-model="alipay" text-align='left' placeholder="请输入提现支付宝账号"></x-input>
      <x-input title="支付宝姓名" v-model="ali_name" text-align='left' placeholder="请输入提现支付宝姓名"></x-input>
    </div>
    <div class="div-input matop">  
      <x-input title="提现金额" type="number" v-model="price" text-align='left' :placeholder="moey"></x-input>   
		</div>
		<p class="tip">提现额外扣除¥{{Number(price*info).toFixed(2)}} 服务费</p>
		<span class="submit-btn" @click="extract_moneys">确认提现</span>
		<p class="shenhe">提现审核通过后1~2工作日内可到账</p>
	</div>
</template>

<script type="text/javascript">
	
	import { XInput, AlertModule } from 'vux'
	import { extract_money, get_service, get_user_info } from '@/api/api'
	export default {
	  components: {
	  	XInput
	  },
	  data () {
	    return {
	    	current_price: '',
	    	price: '',
	    	ali_name: '',
	    	alipay: '',
	    	info: '',
	    	moey: ''
	    }
	  },
	  created () {
			this.get_services()
			this.get_user_infos()
	  },
	  methods: {    
	    router (path) {
	      this.$router.push(path)
	    },
	    // 获取用户信息
	    get_user_infos () {
	    	get_user_info().then((res) => {
					this.personal = res.data.info
					this.moey = '当前金额 '+this.personal.money
	    	}).catch((err) => {
	    		console.dir(err)
	    	})
	    },
	    onItemClick (index) {
	    	this.tabIndex = index
	    },
	    extract_moneys () {
	    	var jsonData = {
	    		alipay: this.alipay,
	    		truename: this.ali_name,
	    		money: this.price
	    	}
	    	extract_money(jsonData).then((res) => {
	    		console.log(res)
          AlertModule.show({
            title: '温馨提示',
            content: res.data.info,
            onHide: () => {
              this.$router.push({path: 'balance'})
            }
          })
	    	}).catch((err) => {
	    		console.log(err)
	    	})
	    },
	    get_services () {
				get_service().then((res) => {
					this.info = res.data.info
				}).catch((err) => {
					console.log(err)
				})
	    }
	  }
	}
</script>

<style lang="stylus" scoped>
  .put-forward
    background-color #f2f2f2
    height 100vh
    width 100vw
    .matop
      margin-top 1rem
    .div-input
      background-color #fff
      .div
        margin 0 1.5rem
        border-bottom 1px solid #e5e5e5
        display flex
        line-height 5rem
        height 5rem
        overflow hidden
        position relative     		
     		.weui-cell
     			padding 1.6rem 1.5rem
        .weui-label
          font-size 1.5rem
          color #666
          width 10rem !important
        input
          font-size 1.5rem
          color #666
          line-height 3rem
          height 3rem
          margin-top 1rem
          flex 1    
          &::-webkit-input-placeholder
            color #999
        span
          width 9.2rem
          height 3.3rem
          line-height 3.3rem
          text-align center
          background-color #ff659b
          border-radius .3rem
          position absolute
          right 1.5rem
          color #F5F5FA
          font-size 1.5rem
          top .85rem
      .border-none
        border none
    .tip
      margin-top 1.5rem
      margin-left 1.5rem
      color #9F7FFF
      font-size 1.2rem
    .submit-btn
      line-height 5rem
      background-color #FF659B
      border-radius .3rem
      width 92%
      position relative
      left 4%
      display block
      text-align center
      font-size 1.6rem
      font-weight 500
      color #F5F5FA
      margin-top 3rem
    .shenhe
      text-align center
      margin-top 1.5rem
      color #939393
      font-size 1.2rem
</style>